<template>
  <div class="score-person">
    <div class="tabs-container">
      <div
        v-for="tab in mainTabs"
        :key="tab.value"
        class="tab"
        :class="{ active: activeMainTab === tab.value }"
        @click="setActiveMainTab(tab.value)"
      >
        {{ tab.label }}
      </div>
    </div>

    <div class="sub-tabs">
      <span
        v-for="tab in currentSubTabs"
        :key="tab.value"
        :class="{ active: activeSubTab === tab.value }"
        @click="setActiveSubTab(tab.value)"
      >
        {{ tab.label }}
      </span>
    </div>

    <table>
      <thead>
        <tr>
          <th>排名</th>
          <th>球员</th>
          <th>球队</th>
          <th>{{ activeMainTab === 'football' ? '进球' : '得分' }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(player, index) in displayedPlayers" :key="player.id">
          <td>{{ index + 1 }}</td>
          <td class="player-info">
            <img :src="player.playerLogo" :alt="player.playerLogo" class="player-avatar">
            <p>{{ player.playerName }}</p>
          </td>
          <td class="team">
           <div>
             <img :src="player.teamLogo" :alt="player.teamLogo" class="team-logo">
             <p>{{ player.teamName }}</p>
           </div>
          </td>
          <td class="score">{{ player.goal }}</td>
        </tr>
      </tbody>
    </table>

    <div class="footer">数据更新于{{ updateTime }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import axios from 'axios'
import {getFootballSoccerRankApi, getBasketPlayerRankApi} from "@/api/home";
import dayjs from "dayjs";

const mainTabs = [
  { label: '足球射手榜', value: 'football' },
  { label: '篮球得分榜', value: 'basketball' }
]
const activeMainTab = ref('football')

const footballTabs = [
  { label: '英超', value: '9' },
  { label: '意甲', value: '15' },
  { label: '西甲', value: '3' },
  { label: '德甲', value: '21' },
  { label: '法甲', value: '20' },
  { label: '中超', value: '227' }
]

const basketballTabs = [
  { label: 'NBA', value: '580' },
  { label: 'CBA', value: '673' }
]

const activeSubTab = ref('9')
const players:any = ref([

  // 可以继续添加更多球员数据...
])
const updateTime = ref('2023-05-15 10:00')

const currentSubTabs = computed(() => {
  return activeMainTab.value === 'football' ? footballTabs : basketballTabs
})

const displayedPlayers = computed(() => {
  return players.value.slice(0, 16)
})

const setActiveMainTab = (tab) => {
  activeMainTab.value = tab
  activeSubTab.value = currentSubTabs.value[0].value
  fetchData()
}

const setActiveSubTab = (tab) => {
  activeSubTab.value = tab
  fetchData()
}

const fetchData = async () => {
  console.log(activeSubTab.value, 'fetchData', activeMainTab.value);
  let leagueId = activeSubTab.value
  let ajax =  activeMainTab.value === 'football' ? getFootballSoccerRankApi : getBasketPlayerRankApi
  ajax({leagueId}).then(res => {

    console.log(res, '-res-');

    let data = res.data.list || []
    updateTime.value = formatTime(data.dataUpdateTime)
    players.value = data
  })
}

const formatTime = (num: number) => {
  return dayjs(num).format('YYYY-MM-DD HH:mm:ss')
}

watch(activeMainTab, () => {
  activeSubTab.value = currentSubTabs.value[0].value
})

onMounted(() => {
  fetchData()
})
</script>

<style lang="scss" scoped>
.score-person {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;

  .tabs-container {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .tab {
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      padding: 10px 16px;
      color: #afb8cb;

      &.active {
        color: #16b13a;
      }
    }
  }

  .sub-tabs {
    display: flex;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;

    span {
      padding: 0px 10px 10px 10px;
      cursor: pointer;
      color: #afb8cb;

      &.active {
        border-bottom: 2px solid #16b13a;
        color: #16b13a;
      }
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;

    th, td {
      text-align: left;
      padding: 8px;
      color: #525A79;
    }
    .team {
      div {
        display: flex;
        p {
          width: 80px;
          height: 22px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      //display: flex;
    }

    tr:nth-child(even) {
      background-color: #f8f9fa;
    }

    .player-info {
      display: flex;
      align-items: center;
      p {
        width: 80px;
        height: 22px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }

    .player-avatar, .team-logo {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover;
    }

    .score {
      color: #f5222d;
    }
  }

  .footer {
    margin-top: 16px;
    text-align: center;
    color: #999;
    font-size: 12px;
  }
}
</style>
